<script setup lang="ts">
import { useRouter } from 'vue-router'
// import { useConsult } from '@/stores/consult' 因为写了export * 统一导出，就不用写文件夹名称了
import { useConsult } from '@/stores'
import type { FastType } from '@/enums/index'

const store = useConsult()
const router = useRouter()
const rigthFn = () => {
  router.push('/user/consult')
}

// 枚举就类似于 字面量类型 + 联合类型
// const goToDepPage = (index: 0 | 1) => {
const goToDepPage = (index: FastType) => {
  console.log(index)
  // 后面在这个里面， 再去做pinia数据的储存即可
  store.setIllnessType(index)
}

// 创建枚举类型 --- 我们开发主要用枚举来解决 代码中魔法数字的问题
// 1. 值的内容，默认从0开始，依次累加
// 2. 手动改变值也可以， 改数字就是累加
// 3. 手动改值是字符串就不累加了
// enum Direction {
//   Up = 'Up',
//   Down = 'Down',
//   Left = 'Left',
//   Right = 'Right'
// }
// console.log(Direction.Up, Direction.Right)
</script>

<template>
  <div class="consult-fast-page">
    <cp-nav-bar title="极速问诊" a="问诊记录" :rightfn="rigthFn"></cp-nav-bar>
    <div class="fast-logo">
      <img class="img" src="@/assets/consult-fast.png" alt="" />
      <p class="text"><span>20s</span> 快速匹配专业医生</p>
    </div>
    <div class="fast-type">
      <!-- router-link标签既可以跳转连接，也可以绑定click事件 -->
      <router-link to="/consult/dep" @click="goToDepPage(1)" class="item">
        <cp-icon class="pic" name="consult-doctor"></cp-icon>
        <div class="info">
          <p>三甲图文问诊</p>
          <p>三甲主治及以上级别医生</p>
        </div>
        <van-icon name="arrow"></van-icon>
      </router-link>
      <router-link to="/consult/dep" @click="goToDepPage(0)" class="item">
        <cp-icon class="pic" name="consult-message"></cp-icon>
        <div class="info">
          <p>普通图文问诊</p>
          <p>二甲主治及以上级别医生</p>
        </div>
        <van-icon name="arrow"></van-icon>
      </router-link>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.consult-fast-page {
  // padding-top: 46px;
  .fast-logo {
    padding: 30px 0;
    text-align: center;
    .img {
      width: 240px;
    }
    .text {
      font-size: 16px;
      margin-top: 10px;
      > span {
        color: var(--cp-primary);
      }
    }
  }
  .fast-type {
    padding: 15px;
    .item {
      display: flex;
      padding: 16px;
      border-radius: 4px;
      align-items: center;
      margin-bottom: 16px;
      border: 0.5px solid var(--cp-line);
    }
    .pic {
      width: 40px;
      height: 40px;
    }
    .info {
      margin-left: 12px;
      flex: 1;
      > p:first-child {
        font-size: 16px;
        color: var(--cp-text1);
        margin-bottom: 4px;
      }
      > p:last-child {
        font-size: 13px;
        color: var(--cp-tag);
      }
    }
    .van-icon {
      color: var(--cp-tip);
    }
  }
}
</style>
